<template>
	<view class="container" v-if="isShowNamePop">
		<u-modal :show="isShowNamePop" title="修改昵称" :closeOnClickOverlay="true" :showCancelButton="true"
			@confirm="confirmName()" @cancel="closeNamePop()" @close="closeNamePop()">
			<view class="slot-content">
				<u-form ref="form" :rules="rules" :model="formData" labelWidth="1">
					<u-form-item class="" prop="name" key="name" class="margin-bottom-32">
						<view class="textarea-box">
						<u--textarea border="none" v-model="formData.name" placeholder="请输入昵称" count autoHeight maxlength="20"  ></u--textarea>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			isShowNamePop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				formData: {
					name: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}, ],
				}
			}
		},
		methods: {
			confirmName() {
				console.log('confirmName')
				
				this.$refs.form.validate().then((valid) => {
								console.log(111);
				                if (valid) {
									console.log(123)
									this.$emit('confirmNamePop', this.formData.name)
				                } 
				            }).catch((e)=>{});

			},
			closeNamePop() {
				this.$emit('closeNamePop')
				console.log('closeNamePop')
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;
		.textarea-box {
			width: 500rpx !important;
			border-radius: 12rpx;
			border: 2rpx solid #dadbde;
		}
	}
</style>
